<template>
  <div class="lmOperation">
    <el-button-group class="crud-opts-right">
      <!-- <el-button
        size="mini"
        icon="el-icon-refresh"
        @click="refresh()"
      ></el-button> -->
      <el-popover
        placement="bottom-end"
        width="150"
        trigger="click"
      >
        <el-button
          slot="reference"
          size="mini"
          icon="el-icon-s-grid"
        >
          <i
            class="fa fa-caret-down"
            aria-hidden="true"
          ></i>
        </el-button>
        <el-checkbox
          v-model="allColumnsSelected"
          :indeterminate="allColumnsSelectedIndeterminate"
          @change="handleCheckAllChange"
        >
          全选
        </el-checkbox>
        <el-checkbox
          v-for="item in tableColumns"
          :key="item.property"
          v-model="item.visible"
          @change="handleCheckedTableColumnsChange(item)"
        >
          {{ item.label }}
        </el-checkbox>
      </el-popover>
    </el-button-group>
  </div>
</template>
<script>
import CRUD from '@crud/crud';

function sortWithRef(src, ref) {
  const result = Object.assign([], ref);
  let cursor = -1;
  src.forEach(e => {
    const idx = result.indexOf(e);
    if (idx === -1) {
      cursor += 1;
      result.splice(cursor, 0, e);
    } else {
      cursor = idx;
    }
  });
  return result;
}
export default {
  components: {},
  data() {
    return {
      tableColumns: [], // 表头信息
      allColumnsSelected: true, // 全选
      allColumnsSelectedIndeterminate: false,
      // 忽略下次表格列变动
      ignoreNextTableColumnsChange: false,
      ignoreColumns: []
    };
  },
  mounted() {
    this.hideForColumn();
    this.$nextTick(() => {
      this.updateTableColumns();
    });
  },
  methods: {
    updateTableColumns() {
      const table = this.$parent.$refs.table;
      if (!table) {
        this.tableColumns = [];
        return;
      }
      let cols = null;
      const columnFilter = e => e && e.type === 'default' && e.property && this.ignoreColumns.indexOf(e.property) === -1;
      const refCols = table.columns.filter(columnFilter);
      if (this.ignoreNextTableColumnsChange) {
        this.ignoreNextTableColumnsChange = false;
        return;
      }
      this.ignoreNextTableColumnsChange = false;
      const columns = [];
      const fullTableColumns = table.$children.map(e => e.columnConfig).filter(columnFilter);
      cols = sortWithRef(fullTableColumns, refCols);
      cols.forEach(config => {
        const column = {
          property: config.property,
          label: config.label,
          visible: refCols.indexOf(config) !== -1
        };
        columns.push(column);
      });
      this.tableColumns = columns;
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.allColumnsSelected = true;
        return;
      }
      this.tableColumns.forEach(column => {
        if (!column.visible) {
          column.visible = true;
          this.updateColumnVisible(column);
        }
      });
      this.allColumnsSelected = val;
      this.allColumnsSelectedIndeterminate = false;
    },
    handleCheckedTableColumnsChange(item) {
      let totalCount = 0;
      let selectedCount = 0;
      this.tableColumns.forEach(column => {
        ++totalCount;
        selectedCount += column.visible ? 1 : 0;
      });
      if (selectedCount === 0) {
        this.$notify({ message: '请至少选择一列', type: CRUD.NOTIFICATION_TYPE.WARNING });
        this.$nextTick(function() {
          item.visible = true;
        });
        return;
      }
      this.allColumnsSelected = selectedCount === totalCount;
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0;
      this.updateColumnVisible(item);
    },
    updateColumnVisible(item) {
      const table = this.$parent.$refs.table;
      const vm = table.$children.find(e => e.prop === item.property);
      const columnConfig = vm.columnConfig;
      if (item.visible) {
        // 找出合适的插入点
        const columnIndex = this.tableColumns.indexOf(item);
        vm.owner.store.commit('insertColumn', columnConfig, columnIndex + 1, null);
      } else {
        vm.owner.store.commit('removeColumn', columnConfig, null);
      }
      this.ignoreNextTableColumnsChange = true;
    },
    hideForColumn() {
      var item = {
        label: 'Bucket 识别符',
        property: 'bucket',
        visible: false
      };
      const table = this.$parent.$refs.table;
      if (!(table && table.$children)) {
        setTimeout(() => {
          this.hideForColumn();
        }, 200);
        return;
      }
      const vm = table.$children.find(e => e.prop === item.property);
      if (vm && vm.columnConfig) {
        const columnConfig = vm.columnConfig;
        vm.owner.store.commit('removeColumn', columnConfig, null);
      }
    },
    refresh() {}
  }
};
</script>
<style lang="scss" scoped>
.lmOperation{
  display: inline-block;
}
</style>
